<template>
  <!-- 编写html内容-->
  <div>111</div>
  <a-button type="primary" @click="goto">跳转页面</a-button>
  <br class="high"/>

  <a-button type="primary" @click="goto1" style="top: 50px">跳转页面todoList</a-button>

</template>

<script>
import {defineComponent,ref} from 'vue'
import {useRouter} from 'vue-router'
 // @ is an alias to /src
//defineComponent将封装的组件对象导出去供其他组件使用，defineComponent函数内部无特殊逻辑，主要是为ts下的【类型推导】
// 对于编辑器而言，{} 只是一个 Object 的类型。无法有针对性的提示vue 组件 {} 里应该有哪些属性。增加一层 defineComponet 的话{}
// 就变成了 defineComponent 的参数，对参数类型的提示，可以实现对 {} 中属性的提示
  export default defineComponent({
    name:"HomeView",//组件名称
    //接收父组件的数据
    props:{

    },
    //定义子组件
    components:{

    },
    setup(){
      let router = useRouter();

      let goto = () =>{
        router.push("/LayoutView",{
          query: '我来自HomeView.vue'
        })
      }
      let goto1 = () =>{
        router.push("/HomeDemo",{
          query: '我来自HomeView.vue'
        })
      }
      const value = ref('');
      return{
        value,
        goto,
        goto1
      }
    }
  })
</script>
<style scoped lang="scss">
.high{
  height: 100px;
}
</style>